<template>
  <el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
 
  background-color="black"
  text-color="#fff"
  active-text-color="rgb(182, 17, 27)"
  :router="true">
  <el-menu-item index="/"><span class="spanClass">推荐</span></el-menu-item>
  <el-menu-item index="/fun"><span class="spanClass">娱乐</span></el-menu-item>
  <el-menu-item index="/sports"><span class="spanClass">体育</span></el-menu-item>
  <el-menu-item index="/financial"><span class="spanClass">财经</span></el-menu-item>
  <el-menu-item index="/military"><span class="spanClass">军事</span></el-menu-item>
  <el-menu-item index="/technology"><span class="spanClass">科技</span></el-menu-item>
  <el-menu-item index="/healthy"><span class="spanClass">健康</span></el-menu-item>
  <el-menu-item index="/fashion"><span class="spanClass">时尚</span></el-menu-item>
  <el-menu-item index="/game"><span class="spanClass">游戏</span></el-menu-item>
  <el-menu-item index="/tourism"><span class="spanClass">旅游</span></el-menu-item>
  </el-menu>
</template>

<script>
export default {
  data(){
return{
  activeIndex2:this.$route.path||'/'
}
  }
};
</script>

<style scoped>
 .spanClass{
    font-size: 17px;
    font-weight: bolder;
  
 }
 .el-menu-item{
  width: 10%;
  text-align: center;
 }
 
</style>